<template>
  <div :class="[isBig ? 'flex-row footer-big' : 'flex-row footer-div']">
    <P
      v-for='item in footerBar' :key='item.key'
      :class="[route == item.text || route == 'user' && item.text == 'noLog' ? 'ft-item active' : 'ft-item']"
      @click="goToType(item.route)">
      <van-icon :name="item.icon" size="22px" />
      <br />
      <span>{{ i18n.$t(item.text) }}</span>
    </P>
    <!-- <p
      :class="[route == 'home' ? 'ft-item active' : 'ft-item']"
      @click="goToType('/')"
    >
      <van-icon name="wap-home-o" size="22px" />
      <br />
      <span>{{ i18n.$t('home') }}</span>
    </p>
    <p
      :class="[route == 'star' ? 'ft-item active' : 'ft-item']"
      @click="goToType('/collect')"
    >
      <van-icon name="star-o" size="22px" />
      <br />
      <span>{{ i18n.$t('collect') }}</span>
    </p>
    <p
      :class="[route == 'user' ? 'ft-item active' : 'ft-item']"
      @click="goToType('/User')"
    >
      <van-icon name="manager-o" size="22px" />
      <br />
      <span>{{ i18n.$t('user') }}</span>
    </p> -->
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, defineComponent, toRefs,computed } from 'vue'
import { useI18n } from '@/i18nPlugin'
import { useRouter } from 'vue-router'
//缓存
import { useStore } from 'vuex'
export default defineComponent({
  nem: 'MFooter',
  props: {
    route: {
      type: String,
      default: '',
    },
  },
  setup: (props, context) => {
    const router = useRouter()
    const store = useStore()
    const i18n = useI18n()
    const switchLanguage = () => {
      const locale = i18n.locale.value === 'en' ? 'es' : 'en'
      i18n.locale.value = locale
    }
    const data = reactive({
      isBig: (<any>window).utils.isBigScreen(),
      activeType:props.route,
      footerBar:computed(() => {
        return store.state.footerBar
      })
    })
    const goToType = (route: string) => {
      let obj = {
        key:'collectBackType',
        value:'/Home'
      }
      store.commit('MUTATIONS_SET_STATE',obj)
      router.replace(route)
    }
    onMounted(() => {
      console.log(JSON.parse(JSON.stringify(data.activeType)))
    })
    return { i18n, switchLanguage, goToType, ...toRefs(data) }
  },
})
</script>

<style scoped lang="scss">
.flex-row {
  position: fixed;
  z-index: 100;
  bottom: -1px;
  width: 100%;
  // padding: 0 2%;
  height: 55px;
  background: #fff;
  // border-top: 1px solid #f3f3f3;
  // box-shadow: #333 5px 10px 19px 0;
  .ft-item {
    width: 33.333%;
    height: 50px;
    text-align: center;
    position: relative;
    padding-top: -5px;
    color: #666;
    margin: 0;
    text-align: center;
    .van-icon {
      font-size: 16px;
      display: inline-block;
      margin: 5px auto 0 auto;
      // position: relative;
      // top: 0px;
    }
    span {
      position: relative;
      bottom: 12px;
      // left: -14px;
      // width: 50px;
      font-size: 12px;
    }
  }
  .active {
      color: $theme;
      // font-weight: bold;
      // i {
      //   font-weight: bold;
      // }
    }
}
.footer-big {
  height: 75px;
  padding-bottom: 20px;
  .ft-item {
    span:last-child {
      bottom: 20px;
      font-size: 12px;
    }
  }
}
</style>
